<template>
    <div class="menu">
        <ul class="menu-ul">
            <router-link tag="li" v-for='(menu,index) in menus' :to="getPath(menu.path)" replace :key="'maintab'+index">
                <i class="iconfont " :class="'icon-'+ menu.cssname"></i>
                <span class="menu-text">{{menu.titleName}}</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
  name: "v-maintab",
  data() {
    return {
      menus: [
        { path: "/homeindex", titleName: "首页", cssname: "home" },
        { path: "/masterHome", titleName: "介绍", cssname: "face" },
        { path: "/hotProjectHome", titleName: "资讯", cssname: "remen" },
        { path: "/me", titleName: "个人中心", cssname: "me" }
      ]
    };
  },
  computed: {},
  methods: {
      getPath(path){
          if(path=='/masterHome'||path=='/hotProjectHome') return {'path':path,'query': {tabIndex: 0}};
          else return path;
      }
  },
  components: {},
  mounted() {
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';

.menu {
    position: fixed;
    background-color: #fff;
    z-index: 20;
    height: 0.4rem;
    box-shadow: 0 -1px 0px rgba(50, 50, 50, 0.1);
    bottom 0;
    left 50%;
    max-width 750px;
    width 100%;
    transform:translate3d(-50%,0,0);
    -webkit-transform:translate3d(-50,0,0);
    padding 0 .08rem;
    box-sizing border-box;

    .menu-ul {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;

        li {
            flex: 1;

            .iconfont {
                color: #acacac;
                font-size: 0.2rem;
            }

            .menu-text {
                display: block;
                font-size: 0.12rem;
                line-height: 0.14rem;
                color: #acacac;
                letter-spacing 0.01rem;
            }
        }

        .active {
            .iconfont {
                color: #ec769a;
            }

            .menu-text {
                color: #ec769a;
            }
        }
    }
}
</style>